<template>
  <material-card color="primary">
    <template #title>
      <v-row>
        <small class="text-body-1">{{ title }}</small>
        <v-btn
          class="mx-0"
          fab
          icon
          x-small
          color="primary"
          @click="refleshX()"
        >
          <v-icon>mdi-cached</v-icon>
        </v-btn>
        <v-spacer />
        <span style="font-size: 30px;"><i>{{ xData.at(-1).yLabel.toFixed(2) }}%</i></span>
      </v-row>
    </template>
    <div :id="name" />
  </material-card>
</template>

<script>
  import { Chart } from '@antv/g2'

  export default {
    name: 'ChartX',
    props: {
      value: Array,
      name: String,
      title: String,
      interval: {
        type: Number,
        required: false,
        default: 5000,
      },
    },
    data: () => ({
      chartTimer: 0,

      xData: [
        { xLabel: '', yLabel: 0 },
      ],
      chartXG2: {},
      updateTime: new Date().getTime(),
    }),
    computed: {
    },
    watch: {
      xData (val, oldVal) {
        var now = new Date().getTime()
        clearTimeout(this.chartTimer)
        if ((now - this.updateTime) > this.interval) {
          this.chartUpdate()
          this.updateTime = now
        } else {
          this.chartTimer = setTimeout(this.dataUpdate, now - this.updateTime)
        }
      },
      value (val, oldVal) {
        this.xData = val
      },
    },
    mounted () {
      this.chartXG2Init()
    },
    methods: {
      chartXG2Init () {
        this.chartXG2 = new Chart({
          container: this.name,
          autoFit: true,
          height: 148,
        })
        var chart = this.chartXG2
        var data = this.xData
        chart.data(data)
        chart.axis('yLabel', {
          title: {},
        })
        chart.tooltip({
          showMarkers: true,
          showCrosshairs: true,
        })
        chart.scale({
          yLabel: {
            max: 100,
            min: 0,
          },
        })
        chart.scale('yLabel', {
          nice: true,
          alias: '百分率',
        })
        chart.line().position('xLabel*yLabel').color('#1890ff').shape('smooth')
        // chart.area().position('xLabel*yLabel').color('#1890ff').shape('smooth')
        chart.interaction('active-region')
        chart.annotation().regionFilter({
          top: true,
          start: ['min', 105],
          end: ['max', 90],
          color: '#ff4d4f',
        })
        chart.annotation().line({
          start: ['min', 90],
          end: ['max', 90],
          style: {
            stroke: '#ff4d4f',
            lineWidth: 1,
            lineDash: [3, 3],
          },
        })
        // chart.area().position('xLabel*yLabel')
        chart.render()
      },
      dataUpdate () {
        if (this.xData.length > 50) {
          this.xData.shift()
        }
        this.xData.push({
          xLabel: new Date().toLocaleTimeString(),
          yLabel: Math.random() * 100,
        })
      },
      chartUpdate () {
        this.chartXG2.data(this.xData)
        this.chartXG2.render()
      },
      refleshX () {
        this.chartUpdate()
      },
    },
  }
</script>
